import { PageHeader, Tabs, Button, Statistic, Descriptions, Card, Row, Col, Table } from 'antd';
import React, { Component } from 'react';

const { TabPane } = Tabs;
const renderContent = (column = 2) => (
	<Descriptions size="default" column={column} bordered>
		{/* 判断若quotation_id为空，则证明直接创建订单，以下内容为无 */}
		<Descriptions.Item label="参照报价单">40001</Descriptions.Item>
		<Descriptions.Item label="公司编号">10002</Descriptions.Item>
		{/* 这里应该需要操作员名称，而不是编号 */}
		<Descriptions.Item label="操作员">Tim</Descriptions.Item>
		<Descriptions.Item label="预计送达日期">2021-08-02</Descriptions.Item>
		<Descriptions.Item label="订单折扣">5%</Descriptions.Item>
		<Descriptions.Item label="预计送货地点">上海</Descriptions.Item>
	</Descriptions>
);

const Content = ({ children, extra }) => (
	<div className="content">
		<div className="main">{children}</div>
		<div className="extra">{extra}</div>
	</div>
);

export default class Orderdetail extends Component {
	render() {
		const dataSource = [
			{
				product_id: '1',
				product_name: 'iphone12',
				quantity: 2,
				price: 6000,
				plant_id: '西湖区湖底公园1号'
			}
		];

		const columns = [
			{
				title: '商品编号',
				dataIndex: 'product_id',
				key: 'product_id'
			},
			{
				title: '商品名称',
				dataIndex: 'product_name',
				key: 'product_name'
			},
			{
				title: '订购数量',
				dataIndex: 'quantity',
				key: 'quantity'
			},
			{ title: '单价', dataIndex: 'price', key: 'price' },
			{ title: '工厂编号', dataIndex: 'plant_id', key: 'plant_id' }
		];

		//此函数用于确认发货后新生成的发货单，并弹出成功
		const post = () => {
			//发送至后端，取到发货单号
			//要用result组件展示结果的话，建议单写一个result组件，add到tabpane里（或者就用message提示成功）
			//https://ant-design.gitee.io/components/result-cn/
		};

		return (
			<PageHeader
				className="site-page-header-responsive"
				title="编号：50004"
				footer={
					<Tabs defaultActiveKey="1">
						<TabPane tab="详情展示" key="1">
							<Card bordered={false}>
								<Table dataSource={dataSource} columns={columns} />;
							</Card>
						</TabPane>
					</Tabs>
				}
				extra={
					// 该按钮应该需要判断未发货状态才可以展示
					<Button type="primary" onClick={post()}>
						确认发货
					</Button>
				}
			>
				<Content
					extra={
						<div>
							<br />
							<Card>
								<Row gutter={16}>
									<Col span={3}>
										<Statistic title="状态" value="已完成" />
									</Col>
									<Col span={4}>
										<Statistic title="总价" prefix="¥" value={12000} />
									</Col>
								</Row>
							</Card>
						</div>
					}
				>
					{renderContent()}
				</Content>
			</PageHeader>
		);
	}
}
